<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox ibox-body">
                <div class="ibox-title">
                    <h5>选择部门</h5>
                </div>
                <div class="ibox-content">
                    <div id="jstree"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-8" id="formSearch" name="formSearch">
            <div class="ibox">
                <div class="ibox-body">
                    <div class="form-group col-sm-6">
                        <label class="col-sm-5 control-label" style="margin-top:10px;width:29%;">关键字</label>
                        <div class="col-sm-8">
                            <input id="name" name="name" type="text" class="form-control">
                        </div>
                    </div>
                    <div class="form-group col-sm-6">
                        <button id="btnSearch" class="btn btn-success" onclick="reLoad()">查询</button>
                        <button id="btnReset" class="btn btn-danger" onclick="reSet()">重置</button>
                        <button id="btnSure" class="btn btn-primary" onclick="reSure()">确定</button>
                        <input type="hidden" id="roleIds" th:value="${roleId}">
                    </div>
                </div>
            </div>
            <table id="userList" data-mobile-responsive="true" lay-filter="member">
            </table>
        </div>

    </div>

</div>
<div th:include="include :: footer"></div>
<script>

    var roleId = $("#roleIds").val();

    //1.管理员  2.审批员   3.普通用户
    if(roleId == 3) {
        roleId = "";
    }

    //加载接收人
    var deptId = '';
    getTreeData();
    loadUser(roleId);

    function loadUser(roleId) {
        $('#userList')
            .bootstrapTable(
                {
                    method : 'get', // 服务器数据的请求方式 get or post
                    url : "/sys/user/list", // 服务器数据的加载地址
                    striped: true, // 设置为true会有隔行变色效果
                    dataType: "json", // 服务器返回的数据类型
                    pagination: true, // 设置为true会在底部显示分页条
                    singleSelect: false, // 设置为true将禁止多选
                    // //发送到服务器的数据编码类型
                    pageSize: 10, // 如果设置了分页，每页数据条数
                    pageNumber: 1, // 如果设置了分布，首页页码
                    sidePagination: "server", // 设置在哪里进行分页，可选值为"client" 或者
                    queryParams : function(params) {
                        var formData = $('#formSearch').serializeObject();
                        if(!formData){
                            formData = {};
                        }
                        formData.limit = params.limit;
                        formData.offset = params.offset;
                        formData.sort = this.sortName;
                        formData.order = this.sortOrder;
                        formData.deptId = "";
                        formData.roleId = roleId;
                        formData.flag = 1;
                        formData.deptId = deptId;
                        return formData;
                    },
                    columns : [
                        {
                            checkbox : true
                        },
                        {
                            field : 'userId', // 列字段名
                            title : '序号',
                            align: "left"
                        },
                        {
                            field : 'name',
                            title : '姓名',
                            align: "left"
                        },
                        {
                            field : 'username',
                            title : '账号',
                            align: "left"
                        },
                        {
                            field : 'deptName',
                            title : '所属部门',
                            align: "left"
                        },
                        ]
                });
    }

    function reLoad() {
        $('#userList').bootstrapTable('refresh');
    }

    //重置输入框
    function reSet(){
        cleardata("formSearch");
        deptId = '';
        reLoad();
    }
    
    function reSure() {
        var rows = $('#userList').bootstrapTable('getSelections'); // 返回所有选择的行，当没有选择的记录时，返回一个空数组
        if (rows.length == 0) {
            layer.msg("请选择用户");
            return;
        }
        if(roleId != "" && rows.length != 1) {
            layer.msg("请选择一个审批员");
            return;
        }
        var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
        parent.layer.close(index);
        var html='';
        var userIdAll = "";
        $.each(rows,function(i){
            if(i != rows.length - 1) {
                userIdAll += this.userId + ",";
            }else {
                userIdAll += this.userId;
            }
            html+='<tr>';
            html+='<td style="text-align:center;">'+this.name+'</td>';
            html+='<td style="text-align:center;">'+this.username+'</td>';
            html+='<td style="text-align:center;">'+this.deptName+'</td>';
            html+='</tr>';
        });
        if(roleId == "") {
            parent.$('#targetIds').val(userIdAll);
            parent.$("#tbody1").html(html);
        }else {
            parent.$('#auditid').val(userIdAll);
            parent.$("#tbody2").html(html);
        }
    }

    function getTreeData() {
        $.ajax({
            type : "GET",
            url : "/system/sysDept/tree",
            success : function(tree) {
                loadTree(tree);
            }
        });
    }
    function loadTree(tree) {
        $('#jstree').jstree({
            'core' : {
                'data' : tree
            },
            "plugins" : [ "search" ]
        });
        $('#jstree').jstree().open_all();
    }
    $('#jstree').on("changed.jstree", function(e, data) {
        if (data.selected == -1) {
            var opt = {
                query : {
                    deptId : '',
                }
            }
            $('#userList').bootstrapTable('refresh', opt);
        } else {
            deptId = data.selected[0];
            var opt = {
                query : {
                    deptId : data.selected[0],
                }
            }
            $('#userList').bootstrapTable('refresh',opt);
        }

    });

</script>
</body>
</html>